<template>
<div class="wrapper tag-item"> 
    <div class="fl left-list"> 
     <div class="tc-data-list"> 
      <div class="tc-list"> 
       <ul class="detail-list" v-infinite-scroll="loadMore"> 




        <li class="qa-item" v-for="(i,index) in list" :key="index"> 
         <div class="fl record"> 
          <div class="number"> 
           <div class="border useful"> 
            <p class="usenum"><a  @click="thumbup(index)" class="zan"><i :class="'fa fa-thumbs-up '+i.zan" aria-hidden="true"></i></a></p> 
            <p class="zannum"> {{i.thumbup}} </p> 
           </div> 
           <div class="border answer"> 
            <a href="#" class="star"><i class="fa fa-star-o" aria-hidden="true"></i></a> 
           </div> 
          </div> 
         </div> 
         <div class="info"> 
          <p class="text"> 
            <router-link :to="'/spit/'+i._id" >{{i.content}}</router-link>
          </p> 
          <div class="other"> 
           <div class="fl date"> 
            <span>{{i.publishtime}}</span> 
           </div> 
           <div class="fr remark"> 
            <a href="#" data-toggle="modal" data-target="#shareModal" class="share"><i class="fa fa-share-alt" aria-hidden="true"></i> 分享</a> 
            <a href="#" data-toggle="modal" data-target="#remarkModal" class="comment"><i class="fa fa-commenting" aria-hidden="true"></i> 回复</a> 
           </div> 
          </div> 
         </div> 
         <div class="clearfix"></div> </li> 
        



       </ul>        
      </div> 
     </div> 

    </div> 
    <div class="fl right-tag"> 
     <div class="block-btn"> 
      <p>来个匿名吐槽，发泄一下你心中的怒火吧！</p> 
      <router-link class="sui-btn btn-block btn-share" to="/spit/submit">发吐槽</router-link>
     </div> 
    </div> 
    <div class="clearfix"></div> 
   </div>
</template>

<script>
import '~/assets/css/page-sj-spit-index.css'

import spitApi from '@/api/spit'
import {getUser} from '@/utils/auth'
export default {
  data(){
    return {
      pageNo: 1
    }
  },
  asyncData(){
    return spitApi.search(1,10,{}).then(res=>{
        console.log(res.data.data.rows)
        //给list中的每个对象加入列：动态加入
        let temp = res.data.data.rows.map(item=>{
          return {
            ...item,
            zan: ''
          }
        })
        //返回的
        return {
          list: temp
        }
    })
  },
  methods: {
    loadMore(){
       spitApi.search(++this.pageNo,10,{}).then(res=>{
          //得到的数据是用拼接
          this.list = this.list.concat(res.data.data.rows)
       })
    },
    //点赞
    thumbup(index){
       // 只有登录了才能点赞
       if(getUser().name===undefined){
         this.$message({
             message: '亲，只有登录了才能点赞哦~~~~',
             type: 'error'
          })
         return 
       }

       //赞只能点一次
       if(this.list[index].zan==='color'){
         this.$message({
             message: '亲，赞只能点一次哦~~~~',
             type: 'error'
          })
         return 
       }


       //传递列表的索引，方便获取根据索引获取数据
       console.log(this.list[index])
       spitApi.thumbup(this.list[index]._id).then(res=>{
          this.$message({
             message: res.data.message,
             type: (res.data.flag?'success':'error')
          })
          if(res.data.flag){
              //让点赞数加一
              this.list[index].thumbup++
              //给大拇指加颜色
              this.list[index].zan='color'
          }
       })
    }
  }
}
</script>
